<template>
  <MyVanskeletonVue :loading="loading">
    <template v-slot:my-content>
      <div class="gossip-wrap">
        <NavBarVue :title="title" />
        <!-- 版规 start -->
        <div class="gossip-norm" @click="onTip" v-if="show_tip === true">
          <span>嘉兴人才网匿名八卦版规</span>
          <van-icon
            name="clear"
            size="18"
            color="#fff"
            @click.stop="show_tip = false"
          />
        </div>
        <!-- 版规 end -->
        <van-tabs
          v-model="active"
          swipeable
          animated
          sticky
          :offset-top="show_tip === true ? '74px' : '46px'"
          class="gossip-cont"
          :class="{ 'norm-top': show_tip === true }"
        >
          <van-tab title="全部">
            <van-list class="list">
              <div class="item" v-for="(item, index) in list_all" :key="index">
                <div class="emit">
                  <img
                    :src="
                      require('@/assets/img/person/user-default/' +
                        item.info.LogoUrl)
                    "
                  />
                  <dl>
                    <dt>
                      <b v-if="item.info.UserID === personid">我</b>
                      <b v-else>{{ item.info.NickName }}</b>
                      <i class="boy" v-if="item.info.Sex === '男'"></i>
                      <i class="girl" v-else></i>
                      <span>{{
                        $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                      }}</span>
                    </dt>
                    <dd>
                      <span>{{ item.info.Content }}</span>
                    </dd>
                  </dl>
                </div>
                <div class="handle">
                  <p class="share" @click="onShare(item)">
                    <span>分享</span>
                  </p>
                  <p class="remark" @click="onAnswerClick(item, index)">
                    <span v-if="item.list_answer.length === 0">评论</span>
                    <span v-else>评论({{ item.list_answer.length }})</span>
                  </p>
                  <p class="like active" v-if="item.isZan === 1">
                    <span>点赞</span>
                  </p>
                  <p class="like" @click="zan(item, index)" v-else>
                    <span>点赞</span>
                  </p>
                </div>
                <div class="discuss" v-if="item.list_answer.length > 0">
                  <p
                    v-for="(item_answer, index_answer) in item.list_answer"
                    :key="index_answer"
                    @click="onAnswerItemClick(item_answer, index_answer, index)"
                  >
                    <b v-if="item_answer.FromUserID === personid">我</b>
                    <b
                      v-else-if="item_answer.FromUserID === item_answer.OwnerID"
                      >楼主</b
                    >
                    <b v-else>{{ item_answer.FromUserNickName }}</b>
                    <template v-if="item_answer.ToUserID != ''">
                      <span>回复</span>
                      <b v-if="item_answer.ToUserID === personid">我</b>
                      <b
                        v-else-if="item_answer.ToUserID === item_answer.OwnerID"
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.ToUserNickName }}</b>
                    </template>
                    <span>：</span>
                    <span>{{ item_answer.Content }}</span>
                  </p>

                  <!-- <p><a href="#">查看全部评论</a></p> -->
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="职场爆料">
            <van-list class="list">
              <div v-for="(item, index) in list_all" :key="index">
                <div class="item" v-if="item.info.Type === '职场爆料'">
                  <div class="emit">
                    <img
                      :src="
                        require('@/assets/img/person/user-default/' +
                          item.info.LogoUrl)
                      "
                    />
                    <dl>
                      <dt>
                        <b v-if="item.info.UserID === personid">我</b>
                        <b v-else>{{ item.info.NickName }}</b>
                        <i class="boy" v-if="item.info.Sex === '男'"></i>
                        <i class="girl" v-else></i>
                        <span>{{
                          $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                        }}</span>
                      </dt>
                      <dd>
                        <span>{{ item.info.Content }}</span>
                      </dd>
                    </dl>
                  </div>
                  <div class="handle">
                    <p class="share" @click="onShare(item)">
                      <span>分享</span>
                    </p>
                    <p class="remark" @click="onAnswerClick(item, index)">
                      <span v-if="item.list_answer.length === 0">评论</span>
                      <span v-else>评论({{ item.list_answer.length }})</span>
                    </p>
                    <p class="like active" v-if="item.isZan === 1">
                      <span>点赞</span>
                    </p>
                    <p class="like" @click="zan(item, index)" v-else>
                      <span>点赞</span>
                    </p>
                  </div>
                  <div class="discuss" v-if="item.list_answer.length > 0">
                    <p
                      v-for="(item_answer, index_answer) in item.list_answer"
                      :key="index_answer"
                      @click="
                        onAnswerItemClick(item_answer, index_answer, index)
                      "
                    >
                      <b v-if="item_answer.FromUserID === personid">我</b>
                      <b
                        v-else-if="
                          item_answer.FromUserID === item_answer.OwnerID
                        "
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.FromUserNickName }}</b>
                      <template v-if="item_answer.ToUserID != ''">
                        <span>回复</span>
                        <b v-if="item_answer.ToUserID === personid">我</b>
                        <b
                          v-else-if="
                            item_answer.ToUserID === item_answer.OwnerID
                          "
                          >楼主</b
                        >
                        <b v-else>{{ item_answer.ToUserNickName }}</b>
                      </template>
                      <span>：</span>
                      <span>{{ item_answer.Content }}</span>
                    </p>

                    <!-- <p><a href="#">查看全部评论</a></p> -->
                  </div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="大厂热议">
            <van-list class="list">
              <div v-for="(item, index) in list_all" :key="index">
                <div class="item" v-if="item.info.Type === '大厂热议'">
                  <div class="emit">
                    <img
                      :src="
                        require('@/assets/img/person/user-default/' +
                          item.info.LogoUrl)
                      "
                    />
                    <dl>
                      <dt>
                        <b v-if="item.info.UserID === personid">我</b>
                        <b v-else>{{ item.info.NickName }}</b>
                        <i class="boy" v-if="item.info.Sex === '男'"></i>
                        <i class="girl" v-else></i>
                        <span>{{
                          $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                        }}</span>
                      </dt>
                      <dd>
                        <span>{{ item.info.Content }}</span>
                      </dd>
                    </dl>
                  </div>
                  <div class="handle">
                    <p class="share" @click="onShare(item)">
                      <span>分享</span>
                    </p>
                    <p class="remark" @click="onAnswerClick(item, index)">
                      <span v-if="item.list_answer.length === 0">评论</span>
                      <span v-else>评论({{ item.list_answer.length }})</span>
                    </p>
                    <p class="like active" v-if="item.isZan === 1">
                      <span>点赞</span>
                    </p>
                    <p class="like" @click="zan(item, index)" v-else>
                      <span>点赞</span>
                    </p>
                  </div>
                  <div class="discuss" v-if="item.list_answer.length > 0">
                    <p
                      v-for="(item_answer, index_answer) in item.list_answer"
                      :key="index_answer"
                      @click="
                        onAnswerItemClick(item_answer, index_answer, index)
                      "
                    >
                      <b v-if="item_answer.FromUserID === personid">我</b>
                      <b
                        v-else-if="
                          item_answer.FromUserID === item_answer.OwnerID
                        "
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.FromUserNickName }}</b>
                      <template v-if="item_answer.ToUserID != ''">
                        <span>回复</span>
                        <b v-if="item_answer.ToUserID === personid">我</b>
                        <b
                          v-else-if="
                            item_answer.ToUserID === item_answer.OwnerID
                          "
                          >楼主</b
                        >
                        <b v-else>{{ item_answer.ToUserNickName }}</b>
                      </template>
                      <span>：</span>
                      <span>{{ item_answer.Content }}</span>
                    </p>

                    <!-- <p><a href="#">查看全部评论</a></p> -->
                  </div>
                </div>
              </div>
            </van-list></van-tab
          >
          <van-tab title="嘉兴校招"
            ><van-list class="list">
              <div v-for="(item, index) in list_all" :key="index">
                <div class="item" v-if="item.info.Type === '嘉兴校招'">
                  <div class="emit">
                    <img
                      :src="
                        require('@/assets/img/person/user-default/' +
                          item.info.LogoUrl)
                      "
                    />
                    <dl>
                      <dt>
                        <b v-if="item.info.UserID === personid">我</b>
                        <b v-else>{{ item.info.NickName }}</b>
                        <i class="boy" v-if="item.info.Sex === '男'"></i>
                        <i class="girl" v-else></i>
                        <span>{{
                          $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                        }}</span>
                      </dt>
                      <dd>
                        <span>{{ item.info.Content }}</span>
                      </dd>
                    </dl>
                  </div>
                  <div class="handle">
                    <p class="share" @click="onShare(item)">
                      <span>分享</span>
                    </p>
                    <p class="remark" @click="onAnswerClick(item, index)">
                      <span v-if="item.list_answer.length === 0">评论</span>
                      <span v-else>评论({{ item.list_answer.length }})</span>
                    </p>
                    <p class="like active" v-if="item.isZan === 1">
                      <span>点赞</span>
                    </p>
                    <p class="like" @click="zan(item, index)" v-else>
                      <span>点赞</span>
                    </p>
                  </div>
                  <div class="discuss" v-if="item.list_answer.length > 0">
                    <p
                      v-for="(item_answer, index_answer) in item.list_answer"
                      :key="index_answer"
                      @click="
                        onAnswerItemClick(item_answer, index_answer, index)
                      "
                    >
                      <b v-if="item_answer.FromUserID === personid">我</b>
                      <b
                        v-else-if="
                          item_answer.FromUserID === item_answer.OwnerID
                        "
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.FromUserNickName }}</b>
                      <template v-if="item_answer.ToUserID != ''">
                        <span>回复</span>
                        <b v-if="item_answer.ToUserID === personid">我</b>
                        <b
                          v-else-if="
                            item_answer.ToUserID === item_answer.OwnerID
                          "
                          >楼主</b
                        >
                        <b v-else>{{ item_answer.ToUserNickName }}</b>
                      </template>
                      <span>：</span>
                      <span>{{ item_answer.Content }}</span>
                    </p>

                    <!-- <p><a href="#">查看全部评论</a></p> -->
                  </div>
                </div>
              </div>
            </van-list></van-tab
          >
          <van-tab title="求职秘籍"
            ><van-list class="list">
              <div v-for="(item, index) in list_all" :key="index">
                <div class="item" v-if="item.info.Type === '求职秘籍'">
                  <div class="emit">
                    <img
                      :src="
                        require('@/assets/img/person/user-default/' +
                          item.info.LogoUrl)
                      "
                    />
                    <dl>
                      <dt>
                        <b v-if="item.info.UserID === personid">我</b>
                        <b v-else>{{ item.info.NickName }}</b>
                        <i class="boy" v-if="item.info.Sex === '男'"></i>
                        <i class="girl" v-else></i>
                        <span>{{
                          $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                        }}</span>
                      </dt>
                      <dd>
                        <span>{{ item.info.Content }}</span>
                      </dd>
                    </dl>
                  </div>
                  <div class="handle">
                    <p class="share" @click="onShare(item)">
                      <span>分享</span>
                    </p>
                    <p class="remark" @click="onAnswerClick(item, index)">
                      <span v-if="item.list_answer.length === 0">评论</span>
                      <span v-else>评论({{ item.list_answer.length }})</span>
                    </p>
                    <p class="like active" v-if="item.isZan === 1">
                      <span>点赞</span>
                    </p>
                    <p class="like" @click="zan(item, index)" v-else>
                      <span>点赞</span>
                    </p>
                  </div>
                  <div class="discuss" v-if="item.list_answer.length > 0">
                    <p
                      v-for="(item_answer, index_answer) in item.list_answer"
                      :key="index_answer"
                      @click="
                        onAnswerItemClick(item_answer, index_answer, index)
                      "
                    >
                      <b v-if="item_answer.FromUserID === personid">我</b>
                      <b
                        v-else-if="
                          item_answer.FromUserID === item_answer.OwnerID
                        "
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.FromUserNickName }}</b>
                      <template v-if="item_answer.ToUserID != ''">
                        <span>回复</span>
                        <b v-if="item_answer.ToUserID === personid">我</b>
                        <b
                          v-else-if="
                            item_answer.ToUserID === item_answer.OwnerID
                          "
                          >楼主</b
                        >
                        <b v-else>{{ item_answer.ToUserNickName }}</b>
                      </template>
                      <span>：</span>
                      <span>{{ item_answer.Content }}</span>
                    </p>

                    <!-- <p><a href="#">查看全部评论</a></p> -->
                  </div>
                </div>
              </div>
            </van-list></van-tab
          >
          <van-tab title="求职面试"
            ><van-list class="list">
              <div v-for="(item, index) in list_all" :key="index">
                <div class="item" v-if="item.info.Type === '求职面试'">
                  <div class="emit">
                    <img
                      :src="
                        require('@/assets/img/person/user-default/' +
                          item.info.LogoUrl)
                      "
                    />
                    <dl>
                      <dt>
                        <b v-if="item.info.UserID === personid">我</b>
                        <b v-else>{{ item.info.NickName }}</b>
                        <i class="boy" v-if="item.info.Sex === '男'"></i>
                        <i class="girl" v-else></i>
                        <span>{{
                          $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                        }}</span>
                      </dt>
                      <dd>
                        <span>{{ item.info.Content }}</span>
                      </dd>
                    </dl>
                  </div>
                  <div class="handle">
                    <p class="share" @click="onShare(item)">
                      <span>分享</span>
                    </p>
                    <p class="remark" @click="onAnswerClick(item, index)">
                      <span v-if="item.list_answer.length === 0">评论</span>
                      <span v-else>评论({{ item.list_answer.length }})</span>
                    </p>
                    <p class="like active" v-if="item.isZan === 1">
                      <span>点赞</span>
                    </p>
                    <p class="like" @click="zan(item, index)" v-else>
                      <span>点赞</span>
                    </p>
                  </div>
                  <div class="discuss" v-if="item.list_answer.length > 0">
                    <p
                      v-for="(item_answer, index_answer) in item.list_answer"
                      :key="index_answer"
                      @click="
                        onAnswerItemClick(item_answer, index_answer, index)
                      "
                    >
                      <b v-if="item_answer.FromUserID === personid">我</b>
                      <b
                        v-else-if="
                          item_answer.FromUserID === item_answer.OwnerID
                        "
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.FromUserNickName }}</b>
                      <template v-if="item_answer.ToUserID != ''">
                        <span>回复</span>
                        <b v-if="item_answer.ToUserID === personid">我</b>
                        <b
                          v-else-if="
                            item_answer.ToUserID === item_answer.OwnerID
                          "
                          >楼主</b
                        >
                        <b v-else>{{ item_answer.ToUserNickName }}</b>
                      </template>
                      <span>：</span>
                      <span>{{ item_answer.Content }}</span>
                    </p>

                    <!-- <p><a href="#">查看全部评论</a></p> -->
                  </div>
                </div>
              </div>
            </van-list></van-tab
          >
          <van-tab title="其他"
            ><van-list class="list">
              <div v-for="(item, index) in list_all" :key="index">
                <div class="item" v-if="item.info.Type === '其他'">
                  <div class="emit">
                    <img
                      :src="
                        require('@/assets/img/person/user-default/' +
                          item.info.LogoUrl)
                      "
                    />
                    <dl>
                      <dt>
                        <b v-if="item.info.UserID === personid">我</b>
                        <b v-else>{{ item.info.NickName }}</b>
                        <i class="boy" v-if="item.info.Sex === '男'"></i>
                        <i class="girl" v-else></i>
                        <span>{{
                          $dayjs(item.info.InsertTime).format("YYYY-MM-DD")
                        }}</span>
                      </dt>
                      <dd>
                        <span>{{ item.info.Content }}</span>
                      </dd>
                    </dl>
                  </div>
                  <div class="handle">
                    <p class="share" @click="onShare(item)">
                      <span>分享</span>
                    </p>
                    <p class="remark" @click="onAnswerClick(item, index)">
                      <span v-if="item.list_answer.length === 0">评论</span>
                      <span v-else>评论({{ item.list_answer.length }})</span>
                    </p>
                    <p class="like active" v-if="item.isZan === 1">
                      <span>点赞</span>
                    </p>
                    <p class="like" @click="zan(item, index)" v-else>
                      <span>点赞</span>
                    </p>
                  </div>
                  <div class="discuss" v-if="item.list_answer.length > 0">
                    <p
                      v-for="(item_answer, index_answer) in item.list_answer"
                      :key="index_answer"
                      @click="
                        onAnswerItemClick(item_answer, index_answer, index)
                      "
                    >
                      <b v-if="item_answer.FromUserID === personid">我</b>
                      <b
                        v-else-if="
                          item_answer.FromUserID === item_answer.OwnerID
                        "
                        >楼主</b
                      >
                      <b v-else>{{ item_answer.FromUserNickName }}</b>
                      <template v-if="item_answer.ToUserID != ''">
                        <span>回复</span>
                        <b v-if="item_answer.ToUserID === personid">我</b>
                        <b
                          v-else-if="
                            item_answer.ToUserID === item_answer.OwnerID
                          "
                          >楼主</b
                        >
                        <b v-else>{{ item_answer.ToUserNickName }}</b>
                      </template>
                      <span>：</span>
                      <span>{{ item_answer.Content }}</span>
                    </p>

                    <!-- <p><a href="#">查看全部评论</a></p> -->
                  </div>
                </div>
              </div>
            </van-list></van-tab
          >
        </van-tabs>
        <div class="my-operate">
          <p @click="onPublish">
            <van-icon name="records" size="20" color="#777" />
            <span>我来发一贴</span>
          </p>
          <p @click="onMy">
            <van-icon name="manager" size="20" color="#777" />
            <span>我的</span>
          </p>
        </div>
        <!-- 回复操作 start -->
        <van-popup v-model="isAnswer" class="my-reply">
          <b>编辑回复内容</b>
          <p>
            <van-field
              v-model="postAnswerData.content"
              rows="5"
              autosize
              type="textarea"
              :placeholder="answer_tip"
              class="text"
            />
          </p>
          <p>
            <van-button
              round
              type="primary"
              text="取消"
              class="btn"
              @click="isAnswer = false"
            ></van-button>
            <van-button
              round
              type="primary"
              text="发送"
              class="btn"
              :loading="loading_submit"
              @click="onAnswerSubmit"
            ></van-button>
          </p>
        </van-popup>
        <!-- 回复操作 end -->
      </div>
    </template>
  </MyVanskeletonVue>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import { GetBaGuaList } from "@/util/http";
import {
  Icon,
  List,
  Tab,
  Tabs,
  Toast,
  Field,
  Button,
  Dialog,
  Popup,
} from "vant";
import MyVanskeletonVue from "@/components/MyVanskeleton.vue";
import { checkPersonLogin, getPersonID } from "@/util/session";
import { mixin_person_tologin } from "@/mixin/mixins";
import { BaGuaZan, AnswerBaGua, DelBaGuaAnswer } from "@/util/http";
import { returnToPhoneWithData } from "@/util/phone";
export default {
  name: "IndexMain",
  components: {
    NavBarVue,
    MyVanskeletonVue,
    [Icon.name]: Icon,
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Field.name]: Field,
    [Button.name]: Button,
    [Popup.name]: Popup,
  },
  props: ["title"],
  mixins: [mixin_person_tologin],
  // 定义属性
  data() {
    return {
      loading: true,
      active: 0,
      list_all: [],
      personid: getPersonID(),
      isAnswer: false,
      answer_tip: "请输入评论",
      index_edit_list: -1,
      postAnswerData: {
        bgid: 0,
        toUserid: "",
        content: "",
      },
      loading_submit: false,
      show_tip: true,
    };
  },
  mounted() {
    this.onLoad();
  },
  // 方法集合
  methods: {
    onLoad() {
      GetBaGuaList("").then((res) => {
        this.loading = false;
        this.list_all = res;
      });
    },
    //点赞
    zan(item, index) {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      BaGuaZan(item.info.id).then((res) => {
        Toast(res.msg);
        if (res.result === 1) {
          item.isZan = 1;
          this.list_all.splice(index, 1, item);
        }
      });
    },
    //消息点击
    onAnswerItemClick(item_answer, index_answer, index) {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      console.log(item_answer, index_answer, index);
      this.index_edit_list = index;
      this.postAnswerData.bgid = item_answer.BGID;
      if (item_answer.FromUserID === this.personid) {
        //自己发的 可删除
        Dialog.confirm({
          message: "确认删除该评论？",
          confirmButtonText: "删除",
        })
          .then(() => {
            DelBaGuaAnswer(item_answer.id).then((res) => {
              Toast(res.msg);
              let item = this.list_all[index];
              item.list_answer.splice(index_answer, 1);
              this.list_all.splice(index, 1, item);
            });
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.isAnswer = true;
        this.postAnswerData.toUserid = item_answer.FromUserID;
        if (item_answer.FromUserID === item_answer.OwnerID) {
          this.answer_tip = "回复 楼主";
        } else {
          this.answer_tip = "回复 " + item_answer.FromUserNickName;
        }
      }
    },
    onAnswerClick(item, index) {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      // console.log(item, index);
      this.isAnswer = true;
      this.postAnswerData.bgid = item.info.id;
      this.index_edit_list = index;
      this.answer_tip = "回复 楼主";
    },
    onAnswerSubmit() {
      if (this.postAnswerData.content.trim() === "") {
        Toast("请输入评论");
        return;
      }
      this.loading_submit = true;
      AnswerBaGua(this.postAnswerData).then((res) => {
        this.loading_submit = false;
        Toast(res.msg);
        if (res.result === 1) {
          let item = this.list_all[this.index_edit_list];
          item.list_answer = res.list;
          this.list_all.splice(this.index_edit_list, 1, item);
          this.isAnswer = false;
          this.postAnswerData = {
            bgid: 0,
            toUserid: "",
            content: "",
          };
          this.index_edit_list = -1;
        }
      });
    },
    //发布
    onPublish() {
      this.$router.push({ name: "person-bagua-publish" });
    },
    //我的
    onMy() {
      this.$router.push({ name: "person-bagua-my" });
    },
    //版规
    onTip() {
      this.$router.push({ name: "person-bagua-tip" });
    },
    onShare(item) {
      //console.log(item);
      let title = `【匿名八卦】- ${item.info.Content}`;
      let url = `https://m.573job.com/pages/index/bagua/share?id=${item.info.id}&checkid=11`;
      returnToPhoneWithData({
        action: "share",
        title,
        content: "唠嗑职场圈，嘉兴上班族都在这里 ！",
        url,
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";
@import "./bagua.css";
</style>
